<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="../../assets/css/style.css" type="text/css"/>
        <link rel="stylesheet" href="style_register.css" type="text/css"/>
        <script type="text/javascript" src="../../assets/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="../../assets/jquery.validate.js"></script>
        <script type="text/javascript">

            function change_capcha()
            {
                document.getElementById("capcha_img").src = "captcha.php?rnd=" + Math.random();
            }

            $("document").ready(function() {
                $("#registerForm").validate({
                    rules: {
                        username: {
                            required: true, // required true
                            minlength: 6
                        },
                        password: {
                            required: true, // required true
                            minlength: 6
                        },
                        confirmPassword: {
                            required: true,
                            minlength: 6,
                            equalTo: "#password" // equal to password ID
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        telephone: {
                            required: true,
                            minlength: 6, // min length of digits is 6
                            maxlength: 12 // max lenght of digits is 12
                        }
                    }, 
                    messages: {
                        username: {
                            required: "Please enter a username",
                            minlength: "Your username must consist of at least 6 characters"
                        },
                        password: {
                            required: "Please input your password",
                            minlength: "Your password must consist of at least 6 characters"
                        },
                        confirmPassword: {
                            required: "Please re-type your password",
                            minlength: "Your password must consist of at least 6 characters",
                            equalTo: "Password is same as above"
                        },
                        email: "Please enter a valid email address",
                        telephone: {
                            required: "Digits only",
                            minlength: "At least 6 digits",
                            maxlength: "Max is 12 digits"
                        }
                    }
                });

                $(".change_capcha").click(function(e){
                    change_capcha();
                });
            });
        </script>
    </head>
    <body>
        <!-- -->
        <div id="wrapper">

            <div id="register">

                    <p>Register form</p> <!-- title form -->

                    <form enctype="multipart/form-data" id="registerForm" method="post" action="../../controller/controller_Register.php" class="form-horizontal">

                        <!-- username -->
                        <div class="form-group">
                           <label class="col-sm-2 control-label">Username:</label>
                            <div class="col-xs-3">
                                <input type="text" name="username" id="username" class="form-control input-sm"  />
                            </div>
                        </div>

                        <!-- password -->
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">Password:</label>

                            <div class="col-xs-3">
                                <input type="password" name="password"  id="password" class="form-control input-sm" required />
                            </div>

                        </div>

                        <!-- retype password -->
                        <div class="form-group">
                            <label for="confirmPassword" class="col-sm-2 control-label">Retype-Password:</label>
                            <div class="col-xs-3">
                                <input type="password" name="confirmPassword" id="confirmPassword" class="form-control input-sm" required/>
                            </div>

                        </div>
                        <!-- address -->
                        <div class="form-group">
                            <label for="adress" class="col-sm-2 control-label">Address:</label>
                            <div class="col-xs-3">
                                <textarea class="form-control" name="address"></textarea>
                            </div>
                        </div>

                        <!-- gender -->
                        <div class="form-group">
                            <label for="gender" class="col-sm-2 control-label">Gender:</label>
                            <div class="col-xs-3">
                                <input type="radio" name="gender" value="1"/>Male
                                <input type="radio" name="gender" value="0"/>Female
                            </div>
                        </div>

                        <!-- telephone -->
                        <div class="form-group">
                            <label for="telephone" class="col-sm-2 control-label">Telephone:</label>
                            <div class="col-xs-3">
                                <input type="text" name="telephone" id="telephone" class="form-control input-sm" required />
                            </div>
                        </div>

                        <!-- Email require -->
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">Email:</label>
                            <div class="col-xs-3">
                                <input type="text" name="email" id="email" class="form-control input-sm" required />
                            </div>
                        </div>

                        <!-- upload file section -->
                        <div class="form-group">
                            <label for="file" class="col-sm-2 control-label">Browse File:</label>
                            <div class="col-xs-3">
                                <input type="file" id="file" name="file_upload" value="Browse" accept="rar|zip|txt|jpeg|gif|png" required/>
                            </div>

                        </div>
                        <!-- capcha -->
                        <div class="form-group">
                            <label for="capcha" class="col-sm-2 control-label">Input text:</label>
                            <div class="col-xs-3">
                                <input type="text" name="capcha" id="capcha" class="form-control input-sm" required /><br>
                                <img src="captcha.php" title="capcha" id="capcha_img"/>
                                <a href="javascript:void(0)" class="change_capcha">Change</a>
                            </div>
                        </div>
                        <!-- submit -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div>
                                <input type="submit" value="Register" name="register" id="register" class="btn-default btn btn-sm"/>
                            </div>
                        </div>

                    </form>
            </div> <!-- END register -->

            <div id="clear_fix"></div> <!-- END clear_fix -->

            <div id="footer">
                <?php include("../../footer.php");?>
            </div> <!-- END footer -->

        </div> <!-- END wrapper -->
    </body>
</html>
